function slider(){
	var currentPosition = 0;
	var slideWidth = 800;
	var slides = $('.slide');
	var numberOfSlides = slides.length;


// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
	'float' : 'left',
	'width' : slideWidth,
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);


// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
	.bind('click', function(){
	// Determine new position
	currentPosition = ($(this).attr('id')=='rightControl')
	? currentPosition+1 : currentPosition-1;

	// Hide / show controls
	manageControls(currentPosition);
	// Move slideInner using margin-left
	$('#slideInner').animate({
		'marginLeft' : slideWidth*(-currentPosition)
	});
});

// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
	// Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() }
	else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
	if(position==numberOfSlides-1){ $('#rightControl').hide() }
	else{ $('#rightControl').show() }
	}
}


function binding(){
	$('.mouseover').bind('mouseover', function(){
		var element = $(this);
		var height = element.height();
		var width = element.width();
		if(height > width){
			element.css('height', '120' + 'px');
			element.css('width', '');
			element.css('margin-top', ((120 - element.height()) / 2));
		}
		else{
			element.css('width', '120' + 'px');
			element.css('height', '');
			element.css('margin-top', ((120 - element.height()) / 2));
		}
		element.parent().css('margin', '0px 3px');
		element.parent().css('height', '120px');
		element.parent().css('width', '120px');
		
		var id = $(this).attr('id');
		var title = "#offer_" + id;
		$('#item-title').html('Item: ' + $(title).html());
		$('#item-title').toggle();
	});
	$('.mouseover').bind('mouseout', function(){
		var element = $(this);
		var height = element.height();
		var width = element.width();
		if(height > width){
			element.css('height', '100' + 'px');
			element.css('width', '');
			element.css('margin-top', ((100 - element.height()) / 2));
		}
		else{
			element.css('width', '100' + 'px');
			element.css('height', '');
			element.css('margin-top', ((100 - element.height()) / 2));
		}
		element.parent().css('margin', '10px 13px');
		element.parent().css('height', '100px');
		element.parent().css('width', '100px');
		
		$('#item-title').toggle();
	});
}


$(function(){
	slider();
	resizePictures();
	binding();
});